<template>
	<view class="box">
		<view class="box_content">
			<view class="flex-cb liCnt" @click="showCd">
				<view class="left">
					锁定场地
				</view>
				<input disabled v-model="siteModelName" placeholder="请选择，多选" />
				<u-icon name="arrow-right" size="34rpx" color="#666"></u-icon>
				<view class="quan"></view>
			</view>
			<view class="flex-cb liCnt">
				<view class="left">
					锁定日期
				</view>
				<view style="flex: 1;" class="flex top">
					<picker mode="date" v-model="kssj" @change="bindTimeChange">
						<view class="date" :class="kssj?'':'hui'">
							{{kssj?kssj:'开始日期'}}
						</view>
					</picker>
					<view class="gd">-</view>
					<picker mode="date" v-model="jssj" @change="bindTimeChangeb" :start="nowe">
						<view class="date" :class="jssj?'':'hui'">
							{{jssj?jssj:'结束日期'}}
						</view>
					</picker>
				</view>
			</view>
			<view class="flex-cb liCnt">
				<view class="left">
					锁定时间
				</view>
				<view style="flex: 1;" class="flex top">
					<picker mode="time" v-model="startTime" @change="bindTimeChangec">
						<view class="date" :class="startTime?'':'hui'">
							{{startTime?startTime:'开始时间'}}
						</view>
					</picker>
					<view class="gd">-</view>
					<picker mode="time" v-model="endTime" @change="bindTimeChanged" :start="nowe">
						<view class="date" :class="endTime?'':'hui'">
							{{endTime?endTime:'结束时间'}}
						</view>
					</picker>
				</view>
			</view>
			<view class="flex-cb liCnt" @click="hyzqClick">
				<view class="left">
					锁定周期
				</view>
				<input disabled v-model="zq" placeholder="请选择，多选" />
				<u-icon name="arrow-right" size="34rpx" color="#666"></u-icon>
				<view class="quan"></view>
			</view>
			<view class="flex-cb liCnt">
				<view class="left">
					备注
				</view>
				<input type="text" v-model="des" placeholder="请输入备注" />
			</view>
		</view>
		<!-- 展位 -->
		<view class="seizeAseat"></view>
		<!-- 底部总金额+提交 -->
		<view class="box_active_footer">
			<view class="box_active_footer_btn" @click="submit">确定锁场</view>
		</view>
		<u-popup mode="center" :show="showCheck">
			<view class="pwd_box">
				<view class="pwd_box_title">锁定周期</view>
				<u-checkbox-group v-model="result" @change="onChanges">
					<view class="checkList">
						<view v-for="(item, index) in checkList" :key="index" class="value-class">
							<u-checkbox :name="item.value" :label="item.label">{{ item.label }}</u-checkbox>
						</view>
					</view>
				</u-checkbox-group>
				<view class="pwd_box_footer">
					<view class="pwd_box_footer_qx" @click="onCloses">取消</view>
					<view class="pwd_box_footer_qd" @click="zqBtn">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="showSite">
			<view class="pwd_box">
				<view class="pwd_box_title">锁定场地</view>
				<u-checkbox-group v-model="siteModelIds" @change="onChangeb">
					<view class="checkList">
						<view v-for="(item, index) in siteModelList" :key="index" class="value-class">
							<u-checkbox :name="item.id" :label="item.siteName">{{ item.siteName }}</u-checkbox>
						</view>
					</view>
				</u-checkbox-group>
				<view class="pwd_box_footer">
					<view class="pwd_box_footer_qx" @click="onCloseb">取消</view>
					<view class="pwd_box_footer_qd" @click="zqBtnb">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getYMDHMS
	} from '@/utils/utils';
	export default {
		data() {
			return {
				projectId: '',
				nowe: getYMDHMS(new Date()).slice(0, 10),
				siteModelList: [],
				siteModelIds: [],
				name: uni.getStorageSync('venueName'), //场馆名称
				des: '',
				zq: '',
				siteModelName: '',
				kssj: '',
				jssj: '',
				startTime: '',
				endTime: '',
				checkList: [{
						value: '7',
						label: '周日'
					},
					{
						value: '1',
						label: '周一'
					},
					{
						value: '2',
						label: '周二'
					},
					{
						value: '3',
						label: '周三'
					},
					{
						value: '4',
						label: '周四'
					},
					{
						value: '5',
						label: '周五'
					},
					{
						value: '6',
						label: '周六'
					}
				],
				result: [],
				showCheck: false,
				showSite: false,
				siteId: [],
				dcxz: ''
			};
		},
		onLoad(options) {
			this.setData({
				projectId: options.id
			})
			this.getCdList()
		},
		methods: {
			bindTimeChange: function(e) {
				let str = e.detail.value
				let ch = "-";
				let val = str.replace(new RegExp(ch, 'g'), "/");
				if (this.jssj) {
					let valb = this.jssj.replace(new RegExp(ch, 'g'), "/");
					if (new Date(val).getTime() >= new Date(valb).getTime()) {
						return uni.showToast({
							title: '开始日期需要小于结束日期',
							icon: 'none',
							duration: 2000
						})
					}
				}
				let valc = this.nowe.replace(new RegExp(ch, 'g'), "/");
				if (new Date(val).getTime() < new Date(valc).getTime()) {
					return uni.showToast({
						title: '预定只能选择今天及之后',
						icon: 'none',
						duration: 2000
					})
				}
				this.kssj = e.detail.value
			},
			bindTimeChangeb: function(e) {
				let str = e.detail.value
				if (this.kssj) {
					let ch = "-";
					let val = str.replace(new RegExp(ch, 'g'), "/");
					let valb = this.kssj.replace(new RegExp(ch, 'g'), "/");
					if (new Date(val).getTime() <= new Date(valb).getTime()) {
						return uni.showToast({
							title: '开始日期需要小于结束日期',
							icon: 'none',
							duration: 2000
						})
					}
				}
				this.jssj = e.detail.value
			},
			bindTimeChangec: function(e) {
				let str = e.detail.value
				let ch = "-";
				let val = str.replace(new RegExp(ch, 'g'), "/");
				if (this.endTime) {
					let valb = this.endTime.replace(new RegExp(ch, 'g'), "/");
					if (new Date(val).getTime() >= new Date(valb).getTime()) {
						return uni.showToast({
							title: '开始时间需要小于结束时间',
							icon: 'none',
							duration: 2000
						})
					}
				}
				this.startTime = e.detail.value
			},
			bindTimeChanged: function(e) {
				let str = e.detail.value
				if (this.startTime) {
					let ch = "-";
					let val = str.replace(new RegExp(ch, 'g'), "/");
					let valb = this.startTime.replace(new RegExp(ch, 'g'), "/");
					if (new Date(val).getTime() <= new Date(valb).getTime()) {
						return uni.showToast({
							title: '开始时间需要小于结束时间',
							icon: 'none',
							duration: 2000
						})
					}
				}
				this.endTime = e.detail.value
			},

			// 关闭密码输入弹框
			onClose() {
				this.show = false
				this.pwd = ''
			},
			onCloses() {
				this.showCheck = false
			},
			onCloseb() {
				this.showSite = false
			},


			// 提交订单
			submit() {
				if (this.siteModelIds.length == 0) return uni.showToast({
					title: '请选择锁定场地',
					icon: 'none',
					duration: 2000
				})
				if (!this.kssj) return uni.showToast({
					title: '请选择开始日期',
					icon: 'none',
					duration: 2000
				})
				if (!this.jssj) return uni.showToast({
					title: '请选择结束日期',
					icon: 'none',
					duration: 2000
				})
				if (!this.startTime) return uni.showToast({
					title: '请选择开始时间',
					icon: 'none',
					duration: 2000
				})
				if (!this.endTime) return uni.showToast({
					title: '请选择结束时间',
					icon: 'none',
					duration: 2000
				})
				if (this.result.length == 0) return uni.showToast({
					title: '请选择锁定周期',
					icon: 'none',
					duration: 2000
				})
				this.$app.ajax({
					data: {
						param: {
							endDate: this.jssj,
							projectId: this.projectId,
							endTime: this.endTime,
							startTime: this.startTime,
							siteModelIds: this.siteModelIds,
							remark: this.des,
							startDate: this.kssj,
							type: '0',
							days: this.result.join(',')
						}
					},
					api: this.$api.siteLockStatus()
				}).then((res) => {
					if (res.errorCode == '000000') {
						uni.showToast({
							title: '锁场成功',
							icon: 'success',
							duration: 2000,
							mask: true,
							success(res) {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1,
									})
								}, 1000)
							}
						})
					}
				})
			},
			hyzqClick() {
				this.showCheck = true
			},
			showCd() {
				this.showSite = true
			},
			zqBtn() {
				let result = [...this.result]
				let checkList = [...this.checkList]
				let arr = []
				for (var i = 0; i < checkList.length; i++) {
					for (var s = 0; s < result.length; s++) {
						if (checkList[i].value == result[s]) {
							arr.push(checkList[i].label)
						}
					}
				}
				this.showCheck = false
				this.zq = arr.join(',')
			},
			zqBtnb() {
				let result = [...this.siteModelIds]
				let checkList = [...this.siteModelList]
				let arr = []
				for (var i = 0; i < checkList.length; i++) {
					for (var s = 0; s < result.length; s++) {
						if (checkList[i].id == result[s]) {
							arr.push(checkList[i].siteName)
						}
					}
				}
				this.showSite = false
				this.siteModelName = arr.join(',')
			},
			onChanges(event) {
				this.result = event.detail
			},
			onChangeb(event) {
				this.siteModelIds = event.detail
			},

			getCdList() {
				this.$app.ajax({
					data: {
						param: {
							projectId: this.projectId
						}
					},
					api: this.$api.getCdList()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.siteModelList = res.recordList || []
					}
				}).catch(err => {
					console.log(err)
				})
			},
		}
	};
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.box_xz {
		padding: 30rpx;
		margin-top: 24rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
	}

	.box_xz text:nth-child(1) {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
		margin-bottom: 24rpx;
	}

	.box_xz text {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 15rpx;
	}

	.seizeAseat {
		height: 120rpx;
	}

	.box_active_footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}

	.box_active_footer_btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #4167C1;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}


	.weui-cell__hd {
		display: flex;
		align-items: center;
	}

	.my-icon {
		margin-right: 10rpx;
	}

	.time_js {
		margin-top: 5rpx;
	}

	.van-count-down {
		color: #DD5040 !important;
		font-size: 26rpx !important;
	}

	.pwd_box {
		padding: 30rpx 0 0 0;
		box-sizing: border-box;
		border-radius: 20rpx;
		width: 600rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pwd_box_title {
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.pwd_box_input {
		width: 90%;
		height: 90rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #ececec;
		margin-top: 40rpx;
	}

	.pwd_box_input input {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.pwd_box_footer {
		display: flex;
		width: 100%;
		height: 100rpx;
		margin-top: 40rpx;
		border-top: 1rpx solid #ececec;
	}

	.pwd_box_footer_qx {
		flex: 1;
		height: 100%;
		font-size: 29rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1rpx solid #ececec;
	}

	.pwd_box_footer_qd {
		flex: 1;
		color: #DD5040;
		font-size: 29rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box_active_footer_money text:nth-child(1) {
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
	}

	.box_active_footer_money text:nth-child(2) {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin-top: 16rpx;
	}

	.reds {
		font-size: 32rpx !important;
		font-weight: 600 !important;
		color: #DD5040 !important;
		margin-left: 0 !important;
	}

	.van-radio-group--horizontal {
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 auto;
	}

	.box_content {
		background: #ffffff;
		padding: 20rpx 0 0;
	}

	.box_content .bt {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
		margin-bottom: 24rpx;
		padding-left: 30rpx;
	}

	.custom-icon {
		color: #4167C1;
	}

	.top .date {
		line-height: 53rpx;
		height: 55rpx;
		background: #F7F7F7;
		text-align: center;
		border-radius: 28px;
		font-size: 26rpx;
		width: 200rpx;
		display: inline-block;
		border: 1px solid #EEEEEE;
	}

	.top .date.hui {
		color: #B2B2B2;
	}

	.gd {
		margin: 0 20rpx;
	}

	.checkList {
		width: 80%;
		margin: 0 10%;
		display: flex;
		flex-wrap: wrap;

		.value-class {
			width: 50%;
			margin-top: 20rpx;
			display: inline-block;
		}
	}


	.liCnt {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F7F7F7;
		position: relative;

		.left {
			width: 5em;
			flex: none;
		}

		.quan {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		input {
			font-size: 28rpx;
			flex: 1;
			background: none;
		}
	}
</style>